<template>
  <el-scrollbar v-loading="isLoading" max-height="100%">
    <el-descriptions
      v-for="(item, index) in entityChangeList"
      :key="index"
      :column="2"
      border
      size="small"
    >
      <el-descriptions-item :span="2" label="ID" width="150px">
        {{ item.id }}
      </el-descriptions-item>
      <el-descriptions-item label="类型">
        {{ EntityLogEnum[item.changeType] }}
      </el-descriptions-item>
      <el-descriptions-item label="时间">
        {{ parseDate2Str(item.changeTime, 'YYYY-MM-DD HH:mm:ss') }}
      </el-descriptions-item>
      <el-descriptions-item label="EntityId">
        {{ item.entityId }}
      </el-descriptions-item>
      <el-descriptions-item label="EntityTypeFullName">
        {{ item.entityTypeFullName }}
      </el-descriptions-item>
      <el-descriptions-item label="操作">
        <el-button text type="primary" @click="getDetail(item)">
          查看详情
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
    <el-empty v-if="!entityChangeList.length" :image-size="100" />
    <EntityChangeDetail
      v-model="visible"
      v-model:entity-change-id="entityChangeId"
      :append-to-body="true"
      size="40%"
    />
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

import { getEntityChangeLog } from '@/http/entityChangeLog'
import { EntityLogEnum, IEntityChangeLog } from '@/http/types/entityChangeLog'
import { parseDate2Str } from '@/utils/timeUtils'

import EntityChangeDetail from './EntityChangeDetail.vue'

const props = defineProps({
  auditLogId: {
    type: String,
    default: '',
  },
})

const visible = ref(false)
const isLoading = ref(false)
const entityChangeId = ref('')

const entityChangeList = ref<IEntityChangeLog[]>([])

onMounted(() => {
  init()
})

const init = async () => {
  isLoading.value = true
  const res = await getEntityChangeLog(1, 1000, {
    auditLogId: props.auditLogId,
    changeType: '',
  }).finally(() => {
    isLoading.value = false
  })
  entityChangeList.value = res.items
}

const getDetail = (detail: IEntityChangeLog) => {
  entityChangeId.value = detail.id
  visible.value = true
}
</script>

<style lang="scss" scoped></style>
